<template>
    <div class="page">
        <wl-content-top :line="false">
            <template slot="body">
                <Row class="wl-content">
                    <Col span="24">
                        <div class="wl-content-group">
                            <Input v-model="sel_info" placeholder="请输入..." style="width: 300px;margin-right: 10px"/>
                            <Button class="wl-content-button" type="primary" @click="select_info(sel_info)">查询</Button>
                            <Button type="primary"  class="wl-content-button"  @click="addCarInfo">添加</Button>
                            <Button type="primary">删除</Button>
                        </div>
                    </Col>
                    <Col span="24">
                        <Table border ref="selection" :loading="loading" :columns="tableOptions.tableHead"
                               :data="tableOptions.tableData">
                            <template slot-scope="{ row}" slot="tid">
                                <strong @click="bianji(row)"  style="color: dodgerblue">{{ row.tid }}</strong>
                            </template>
                            <template slot-scope="{ row}" slot="vdeviceid[0].vehicle_no">
                                {{row.vdeviceid[0].vehicle_no}}
                            </template>
                            <template slot-scope="{ row}" slot="vdeviceid[0].unit_name">
                                {{row.vdeviceid[0].unit_name}}
                            </template>
                            <template slot-scope="{ }" slot="action">
                                <Button type="primary" style="margin-right: 5px" @click="update()">更改</Button>
                            </template>
                        </Table>
                    </Col>
                </Row>
                <Modal
                        v-model="modal3"
                        title="添加企业"
                        @on-ok="addok"
                        @on-cancel="addcancel">
                    <template>上级单位：（{{treeSelectData.name}}）
                        <Form :model="formItem" :label-width="150" style="width:370px">
                            <FormItem label="终端ID">
                                <Input v-model="formItem.tid" placeholder="必填"></Input>
                            </FormItem>
                            <FormItem label="终端类型">
                                <Select v-model="formItem.type">
<!--                                    <Option value="0">A5C</Option>-->
<!--                                    <Option value="1">A8L</Option>-->
<!--                                    <Option value="2">A6</Option>-->
<!--                                    <Option value="3">A5</Option>-->
                                </Select>
                            </FormItem>
                            <FormItem label="终端状态">
                                <Select v-model="formItem.status">
                                    <Option :value="1">正常</Option>
                                    <Option :value="2">故障</Option>
                                    <Option :value="3">送修</Option>
                                    <Option :value="4">未用</Option>
                                    <Option :value="5">报废</Option>
                                    <Option :value="6">未安装</Option>
                                    <Option :value="7">停用</Option>
                                </Select>
                            </FormItem>
                            <FormItem label="SIM卡号">
                                <Input v-model="formItem.sim" placeholder=""></Input>
                            </FormItem>
                            <FormItem label="制造商标 识">
                                <Input v-model="formItem.made_in" placeholder="必填"></Input>
                            </FormItem>
                            <FormItem label="备注">
                                <Input v-model="formItem.note" placeholder=""></Input>
                            </FormItem>
                        </Form>
                    </template>
                </Modal>
                <Modal
                        v-model="modal1"
                        title="选择企业"
                        @on-ok="ok"
                        @on-cancel="cancel">
                    <template>
                        <Tree :data="xiiugaimsg" show-checkbox></Tree>
                    </template>
                </Modal>
                <Row type="flex" justify="space-between" class="wl-footer">
                    <Col span="14">
                        <Button  @click="handleSelectAll(true)" class="wl-content-button">全选</Button>
                        <Button @click="handleSelectAll(false)">取消</Button>
                    </Col>
                    <Col span="10">
                        <Page :total="pageOptions.totalRecord" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"/>
                    </Col>
                </Row>
            </template>
        </wl-content-top>
    </div>
</template>

<script>
import WlContentTop from '../../../../components/wl-content-top/wl-content-top'
import { device, deviceselect, deviceSave } from '../../../../api/platform'
import { getDistData } from '@/api/dist'
export default {
  components: { WlContentTop },
  data () {
    return {
      sel_info: '',
      formItem: {
        tid: '',
        type: [],
        status: '',
        sim: '',
        made_in: '',
        note: '',
        name: ''
      },
      xiiugaimsg: [
        {
          title: '监控中心',
          expand: true,
          children: [
            {
              title: '沈阳可欣旅游汽车有限责任公司',
              expand: true,
              children: [
                {
                  title: '可欣一号'
                },
                {
                  title: '可欣二号'
                }
              ]
            },
            {
              title: '沈阳虎跃快客',
              expand: true,
              children: [
                {
                  title: '虎跃一号'
                },
                {
                  title: '虎跃二号'
                }
              ]
            }
          ]
        }
      ],
      selectmsg: '',
      tableOptions: {
        tableHead: [
          {
            width: '120px',
            align: 'center',
            type: 'selection'
          },
          {
            title: '终端ID',
            slot: 'tid'
          },
          {
            title: '安装车辆',
            slot: 'vdeviceid[0].vehicle_no'
          },
          {
            title: '安装单位',
            slot: 'vdeviceid[0].unit_name'

          },
          {
            title: 'SIM卡号',
            key: 'sim'
          },
          {
            title: '制造商标识',
            key: 'note'
          },
          {
            title: '是否开放',
            key: 'type'
          },
          {
            title: '状态',
            slot: 'action',
            width: 150,
            align: 'center'
          }
        ],
        tableData: []
      },
      modal1: false,
      modal3: false,
      loading: false,
      show: false,
      param: {
        page: 1,
        unit_id: 1
      },
      pageOptions: {
        totalRecord: 0
      }
    }
  },
  computed: {
    treeSelectData () {
      return this.$store.state.app.treeSelectData
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    },
    pageSizeChange () {},
    addCarInfo () {
      this.modal3 = true
      this.formItem = {
        tid: '',
        type: [],
        status: [],
        sim: '',
        made_in: '',
        note: ''
      }
    },
    select_info () {

    },
    bianji (e) {
      console.log(e)
      this.modal3 = true
      this.formItem = e
    },
    getList () {
      this.loading = true
      device(this.param).then(ret => {
        this.loading = false
        this.tableOptions.tableData = ret.data.results
        this.pageOptions.totalRecord = ret.data.count
      })
      let data = {}
      getDistData(data).then(ret => {
        console.log(ret, 1111)
        if (ret.type === 9) {
          this.formItem.type = ret.type
        } else {
          this.$Message.error(res.err)
        }
      })
    },
    pageChange (e) {
      this.param.page = e
      this.getList()
    },
    selectsj (e) {
      deviceselect({ keyword: e, unit_id: 1 }).then(ret => {
        this.tableOptions.tableData = ret.data.results
        this.pageOptions.totalRecord = ret.data.count
      })
    },
    update () {
      this.modal1 = true
    },
    add () {
      this.modal3 = true
    },
    ok () {
      this.$Message.info('点击了确定！')
    },
    cancel () {
      this.$Message.info('点击了取消！')
    },
    addok () {
      deviceSave(this.formItem).then(ret => {
        this.formItem = ret.data.results
        console.log(ret)
        this.getList()
      })
    },
    addcancel () {
      this.$Message.info('点击了取消！')
    }
  },
  watch: {
    treeSelectData (value) {
      console.log(value, '---')
      this.param.unit_id = value.id
      this.getList()
    }
  }
}
</script>

<style scoped lang="less">
    .page{
        height: 100%;
    }
    .wl-content-group{
        margin-bottom: 10px;
    }
    .wl-content{
        margin-bottom: 10px;
        &-group{
            margin: 10px;
        }
        &-button{
            margin-right: 10px;
        }
    }
</style>
